<template>
    <el-dialog
    title="编辑"
    :visible="isShowEditDialog"
    @close="dialogClose"
    :close-on-click-modal="false">
    <el-form :model="ruleForm" :rules="rules" ref="carouselChartEditForm" label-width="80px">

      <el-row :gutter="24">
          <el-col :span="24">
              <el-form-item label="名称" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
          </el-col>
      </el-row>

      <el-form-item  label="发布状态" property="fbzt" align="left">
            <el-switch v-model="ruleForm.fbzt"></el-switch>
        </el-form-item>

      <el-row :gutter="24">
          <el-col :span="24">
              <el-form-item label="简介" prop="introduction">
                  <QuillEditor class="editor" v-model="ruleForm.introduce" @changeClick="quillChange1" :testa="ruleForm.introduction"></QuillEditor>
              </el-form-item>
          </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-form-item label="封面" prop="cover" v-model="ruleForm.photo">
            <el-upload
            class="avatar-uploader"
            action="/api/carousels/addCarouselCover"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="ruleForm.cover" :src="ruleForm.cover" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
      </el-row>

    </el-form>
  
    <span style="display: flex;">
          <div style="flex: 1"></div>
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
    </span>
  
  </el-dialog>
  
  </template>
  
  <script>
  import { editCarousel } from '@/api/systemAdministrator/carouselChartManage';
  import QuillEditor from '../../../components/pages/quillEditor.vue'
  export default {
    components:{
        QuillEditor
    },
      data(){
          return{
              ruleForm: {
                  name: '',
                  fbzt: '',
                  introduction: '',
                  cover: '',
              },
              rules:{
                  name:[
                      {required: true, message: '请输入'}
                  ],
                  introduction:[
                      {required: true, message: '请输入'}
                  ],
                  cover:[
                      {required: true, message: '请选择'}
                  ],
              }
          }
      },
      props:{
          isShowEditDialog:{
              type:Boolean
          },
          rowData: {
            type: Object
          }
      },
      methods: {
          dialogClose(){ 
              this.$emit('dialogClose');
          },
          handleAvatarSuccess(file, fileList){
            this.ruleForm.cover = file.data;
          },
          quillChange1(data){
            this.ruleForm.introduction = data;
          },
          submitData() {
            this.$refs.carouselChartEditForm.validate((valid) => {
                if (!valid) {
                    return ;
                }
                else {
                    if(this.ruleForm.fbzt == true){
                        this.ruleForm.fbzt = '已提交';
                    }
                    else{
                        this.ruleForm.fbzt = '未提交';
                    }
                    editCarousel(this.ruleForm).then((res) => {
                        if(res){
                            console.log(res.data);
                            this.$emit('dialogClose');
                        }
                    })
                }
            });
        },
  
      },
      mounted(){
        this.ruleForm = Object.assign(this.rowData, {});
      }
  }
  </script>
  
  <style scoped lang="less">
    .editor{
        height: 200px; 
        margin-bottom: 100px;
    }
    .select{
          width: 100%;
      }
      .el-radio__label{
          padding-left: 6px !important;
      }
      .el-row{
          margin-left: 0 !important;
          margin-right: 0 !important;
      }
      .select{
          width: 100%;
      }
      .avatar-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
          border-color: #409EFF;
      }
      .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
      }
      .avatar {
          width: 178px;
          height: 178px;
          display: block;
      }
      .el-dialog__close, .el-message-box__close{
          color: #606266 !important;
      }
  </style>
  
  